import Pie from "./Pie";
import Column from "./Column";
import MultiLineChart from "./MultiLineChart";
import { Card, Watermark, message } from "antd";

import styled from "@/views/Home/index.module.scss";
import { useNavigate } from "react-router-dom";
import { useEffect } from "react";
import { getCookie } from "@/utils/cookies";



const gridStyle: React.CSSProperties = {
  width: "49.5%",
  height: "250px",
  borderRadius: "15px",
};


export const Monitor = () => {

  const navigateTo = useNavigate();
  useEffect(() => {
    // 判断是否有token，检测用户是否已登录，如果未登录，给出提示，并将其跳转到登录页
    if (getCookie('token') == null) {
      message.error("尚未登录，不得访问！", 1);
      navigateTo("/login");
      return;
    }
    // if (localStorageGetItem('userName') !== 'root') {
    //   message.error("您非root超级管理员，无权访问！", 1);
    //   navigateTo("/");
    //   return;
    // }
  }, []);


  const { homeBox, homeBoxAvatar } = styled;
  return (
    <div className={homeBox}>
      <Watermark content="System Monitor">
        <Card
          style={{ marginBottom: "10px" }}
          bodyStyle={{
            display: "flex",
            justifyContent: "space-between",
          }}
          className={homeBoxAvatar}
        >

        </Card>
        <Card
          style={{ boxShadow: "none", marginBottom: "10px" }}
          bordered={false}
          bodyStyle={{
            display: "block",
          }}
          hoverable title="区域车辆数量统计图"
        >
          <Card.Grid style={{ ...gridStyle, float: "left" }}>
            <Column />
          </Card.Grid>
          <Card.Grid style={{ ...gridStyle, float: "right" }}>
            <Pie />
          </Card.Grid>
        </Card>
        <Card hoverable title="区域单车流量变化图">
          <MultiLineChart />
        </Card>
      </Watermark>
    </div>
  );
};

export default Monitor;
